{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>我是一个模板</title>
  <link rel="stylesheet" href="{% static 'assets/css/amazeui.css' %}" />
  <link rel="stylesheet" href="{% static 'assets/css/common.min.css' %}" />
  <link rel="stylesheet" href="{% static 'assets/css/news.min.css' %}" />
</head>
<body>
  <div class="layout">
    <!--===========layout-header================-->
    <div class="layout-header am-hide-sm-only">
      <!--topbar start-->
      <div class="topbar">
        <div class="container">
          <div class="am-g">
            <div class="am-u-md-3">
              <div class="topbar-left">
                <i class="am-icon-globe"></i>
                <div class="am-dropdown" data-am-dropdown>
                  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>Language <span class="am-icon-caret-down"></span></button>
                  <ul class="am-dropdown-content">
                    <li><a href="#">English</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">中文</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="am-u-md-9">
              <div class="topbar-right am-text-right am-fr">
                Follow us
                <i class="am-icon-facebook"></i>
                <i class="am-icon-twitter"></i>
                <i class="am-icon-google-plus"></i>
                <i class="am-icon-pinterest"></i>
                <i class="am-icon-instagram"></i>
                <i class="am-icon-linkedin"></i>
                <i class="am-icon-youtube-play"></i>
                <i class="am-icon-rss"></i>
                {% if request.session.s_name_001 %}
                {{ request.session.s_name_001 }},您好！<a href="/post">发布</a> <a href="/logout">注销</a>
                  {% else %}
                          <a href="/login">登录</a>
                    <a href="/register">注册</a>
                  {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--topbar end-->

     <div class="header-box" data-am-sticky>
        <!--header start-->
          <div class="container">
            <div class="header">
              <div class="am-g">
                <div class="am-u-lg-2 am-u-sm-12">
                  <div class="logo">
                    <a href=""><img src="{% static 'assets/images/logo.png'%}" alt="" /></a>
                  </div>
                </div>
                <div class="am-u-md-10">
                  <div class="header-right am-fr">
                    <div class="header-contact">
                      <div class="header_contacts--item">
  											<div class="contact_mini">
  												<i style="color:#7c6aa6" class="contact-icon am-icon-phone"></i>
  												<strong>1234567890</strong>
  												<span>周一~周五, 0:00 - 24:00</span>
  											</div>
  										</div>
                      <div class="header_contacts--item">
  											<div class="contact_mini">
  												<i style="color:#7c6aa6" class="contact-icon am-icon-envelope-o"></i>
  												<strong>info@ist.com</strong>
  												<span>随时欢迎您的来信！</span>
  											</div>
  										</div>
                      <div class="header_contacts--item">
  											<div class="contact_mini">
  												<i style="color:#7c6aa6" class="contact-icon am-icon-map-marker"></i>
  												<strong>人妖胡同,</strong>
  												<span>巴洛特利大街22</span>
  											</div>
  										</div>
                    </div>
                    <a href="404-light.html" class="contact-btn">
                      <button type="button" class="am-btn am-btn-secondary am-radius">联系我们</button>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <!--header end-->


        <!--nav start-->
        <div class="nav-contain">
          <div class="nav-inner">
            <ul class="am-nav am-nav-pills am-nav-justify">
              <li class=""><a href="#">首页</a></li>
              <li>
                <a href="#">我是菜单1</a>
                <!-- sub-menu start-->
                <ul class="sub-menu">
									<li class="menu-item"><a href="#">我是菜单1_1</a></li>
									<li class="menu-item"><a href="#">我是菜单1_2</a></li>
									<li class="menu-item"><a href="#">我是菜单1_3</a></li>
								</ul>
                <!-- sub-menu end-->
              </li>
              <li><a href="#">我是菜单2</a></li>
              <li><a href="#">我是菜单3</a></li>
              <li>
                <a href="#">我是菜单4</a>
                <!-- sub-menu start-->
                <ul class="sub-menu">
									<li class="menu-item"><a href="#">我是菜单4_1</a></li>
									<li class="menu-item"><a href="#">我是菜单4_2</a></li>
									<li class="menu-item"><a href="#">我是菜单4_3</a></li>
								</ul>
                <!-- sub-menu end-->
              </li>
              <li><a href="#">我是菜单5</a></li>
              <li><a href="#">我是菜单6</a></li>
              <li><a href="#">我是菜单7</a></li>
            </ul>
          </div>
        </div>
        <!--nav end-->
      </div>

    </div>
    <!--mobile header start-->
    <div class="m-header">
      <div class="am-g am-show-sm-only">
        <div class="am-u-sm-2">
          <div class="menu-bars">
            <a href="#doc-oc-demo1" data-am-offcanvas="{effect: 'push'}"><i class="am-menu-toggle-icon am-icon-bars"></i></a>
            <!-- 侧边栏内容 -->
            <nav data-am-widget="menu" class="am-menu  am-menu-offcanvas1" data-am-menu-offcanvas >
              <a href="javascript: void(0)" class="am-menu-toggle"></a>

              <div class="am-offcanvas" >
                <div class="am-offcanvas-bar">
                  <ul class="am-menu-nav am-avg-sm-1">
                    <li><a href="#" class="" >首页</a></li>
                    <li class="am-parent">
                      <a href="#" class="" >我是菜单1</a>
                      <ul class="am-menu-sub am-collapse ">
                        <li class="">
                          <a href="#" class="" >我是菜单1_1</a>
                        </li>
                        <li class="">
                          <a href="#" class="" >我是菜单1_2</a>
                        </li>
                        <li class="">
                          <a href="#" class="" >我是菜单1_3</a>
                        </li>
                      </ul>
                    </li>
                    <li class=""><a href="#" class="" >我是菜单2</a></li>
                    <li class=""><a href="#" class="" >我是菜单3</a></li>
                    <li class="am-parent">
                      <a href="#" class="" >我是菜单4</a>
                      <ul class="am-menu-sub am-collapse  ">
                        <li class="">
                          <a href="#" class="" >我是菜单4_1</a>
                        </li>
                        <li class="">
                          <a href="#" class="" >我是菜单4_2</a>
                        </li>
                        <li class="">
                          <a href="#" class="" >我是菜单4_3</a>
                        </li>
                      </ul>
                    </li>
                    <li class=""><a href="#" class="" >我是菜单5</a></li>
                    <li class=""><a href="#" class="" >我是菜单6</a></li>
                    <li class=""><a href="#" class="" >我是菜单7</a></li>
                    <li class="am-parent">
                      <a href="#" class="nav-icon nav-icon-globe" >Language</a>
                      <ul class="am-menu-sub am-collapse  ">
                        <li>
                          <a href="#" >English</a>
                        </li>
                        <li class="">
                          <a href="#" >中文</a>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-share-contain">
                      <div class="nav-share-links">
                        <i class="am-icon-facebook"></i>
                        <i class="am-icon-twitter"></i>
                        <i class="am-icon-google-plus"></i>
                        <i class="am-icon-pinterest"></i>
                        <i class="am-icon-instagram"></i>
                        <i class="am-icon-linkedin"></i>
                        <i class="am-icon-youtube-play"></i>
                        <i class="am-icon-rss"></i>
                      </div>
                    </li>
                      {% if request.session.s_name_001 %}
                {{ request.session.s_name_001 }},您好！<a href="/logout">注销</a>
                  {% else %}
                          <li class=""><a href="/login">登录</a></li>
                    <li class=""><a href="/register">注册</a></li>
                  {% endif %}
                  </ul>
                </div>
              </div>
            </nav>

          </div>
        </div>
        <div class="am-u-sm-5 am-u-end">
          <div class="m-logo">
            <a href=""><img src="{% static 'assets/images/logo.png' %}" alt=""></a>
          </div>
        </div>
      </div>
      <!--mobile header end-->
    </div>



    <!--===========layout-container================-->
    <div class="layout-container">
      <div class="page-header">
        <div class="am-container">
          <h1 class="page-header-title">News</h1>
        </div>
      </div>

      <div class="breadcrumb-box">
        <div class="am-container">
          <ol class="am-breadcrumb">
            <li><a href="#">首页</a></li>
            <li class="am-active">News</li>
          </ol>
        </div>
      </div>
    </div>

    <div class="section news-section">
      <div class="container">
        <!--news-section left start-->
        <div class="am-u-md-9">
          <div class="article">
            <header class="article--header">
              <h2 class="article--title"><a href="#" rel="">{{ article.title }}</a></h2>
              <ul class="article--meta">
                <li class="article--meta_item"><i class="am-icon-calendar"></i>{{ article.publish_date }}</li>
                <li class="article--meta_item"><i class="am-icon-user"></i>by{{ article.author }}</li>
                <li class="article--meta_item"><i class="am-icon-commenting-o"></i>33评论</li>
              </ul>
            </header>
            <div class="article--content">
              <p>{{ article.content | safe }}
              </p>
            </div>
          </div>

          <div class="comments">
            <div class="comments">
							<h2 class="comments--title">Comments (2)</h2>
							<ul class="comments_list">
								<li class="comment">
									<header class="comment--header">
										<figure class="comment--userpic"><img src="assets/images/news/av01.jpg" alt=""></figure>
										<strong class="comment--username"><a href="#">Brad Bukovsky</a></strong>
										<time datetime="2001-05-15T19:00" class="comment--date">30th of January, 2016</time>
									</header>
									<div class="comment--content">
										<p>
                      评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
										</p>
										<a href="#" class="comment--reply">回复</a>
									</div>
									<ul class="comments_list">
										<li class="comment">
											<header class="comment--header">
												<figure class="comment--userpic"><img src="assets/images/news/av02.jpg" alt=""></figure>
												<strong class="comment--username"><a href="#">Brad Bukovsky</a></strong>
												<time datetime="2001-05-15T19:00" class="comment--date">30th of January, 2016</time>
											</header>
											<div class="comment--content">
												<p>
                          评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评
												</p>
												<a href="#" class="comment--reply">回复</a>
											</div>
										</li>
									</ul>
								</li>
								<li class="comment">
									<header class="comment--header">
										<figure class="comment--userpic"><img src="assets/images/news/av01.jpg" alt=""></figure>
										<strong class="comment--username"><a href="#">Brad Bukovsky</a></strong>
										<time datetime="2001-05-15T19:00" class="comment--date">30th of January, 2016</time>
									</header>
									<div class="comment--content">
										<p>
                      评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论
										</p>
										<a href="#" class="comment--reply">回复</a>
									</div>
								</li>
							</ul>
							<div class="comment_form">
								<h2 class="comment_form--title">Leave Comment</h2>
                <form class="am-form am-form-horizontal">
                  <div class="am-form-group">
                    <div class="am-g">
                      <div class="am-u-md-4">
                        <input type="text"   placeholder="Full Name">
                      </div>
                      <div class="am-u-md-4">
                        <input type="Email"  placeholder="Email" >
                      </div>
                      <div class="am-u-md-4">
                        <input type="url" placeholder="Website URL">
                      </div>
                    </div>
                    <div class="am-g">
                      <textarea name="comment" cols="30" rows="10" placeholder="Type in here..."></textarea>
                    </div>
                    <div class="comment-form-footer">
                      <button type="button" class="am-btn am-btn-secondary">确认提交</button>
                    </div>
                  </div>
                </form>

							</div>
						</div>
          </div>
        </div>
        <!--news-section left end-->

        <!--news-section right start-->
        <div class="am-u-md-3">
          <div class="blog_sidebar">
            <div class="widget">
              <h2 class="widget--title"><i class="am-icon-file-text-o"></i>最新资讯</h2>
              <ul>
								<li><a href="#">最新资讯1</a></li>
								<li><a href="#">最新资讯2</a></li>
								<li><a href="#">最新资讯3</a></li>
							</ul>
            </div>
            <div class="widget">
              <h2 class="widget--title"><i class="am-icon-comments-o"></i>热门动态</h2>
              <ul>
								<li><a href="#">热门动态热门动态热门动态1</a></li>
								<li><a href="#">热门动态热门动态热门动态2</a></li>
								<li><a href="#">热门动态热门动态热门动态3</a></li>
							</ul>
            </div>
            <div class="widget">
              <h2 class="widget--title"><i class="am-icon-rss"></i>站内公告</h2>
              <ul>
								<li><a href="#">站内公告站内公告站内公告站内公告站内公告站内公告1...</a><span class="rss-date">November 10, 2017</span></li>
								<li><a href="#">站内公告站内公告站内公告站内公告站内公告站内公告站内公告站内公告站内公告站内公告2...</a><span class="rss-date">November 10, 2017</span></li>
							</ul>
            </div>
          </div>
        </div>
        <!--news-section right end-->
      </div>
    </div>
  </div>

  <!--===========layout-container================-->
  <div class="layout-footer">
    <div class="footer">
      <div style="background-color:#383d61" class="footer--bg"></div>
      <div class="footer--inner">
        <div class="container">
          <div class="footer_main">
            <div class="am-g">
              <div class="am-u-md-3 ">
                <div class="footer_main--column">
                  <strong class="footer_main--column_title">关于我们</strong>
                  <div class="footer_about">
                      <p class="footer_about--text">
                        
                      </p>
                      <p class="footer_about--text">
                        
                      </p>
                    </div>
                </div>
              </div>

              <div class="am-u-md-3 ">
                <div class="footer_main--column">
                  <strong class="footer_main--column_title">产品中心</strong>
                  <ul class="footer_navigation">
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                  </ul>
                </div>
              </div>

              <div class="am-u-md-3 ">
                <div class="footer_main--column">
                  <strong class="footer_main--column_title">技术支持</strong>
                  <ul class="footer_navigation">
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                    <li class="footer_navigation--item"><a href="#" class="footer_navigation--link"></a></li>
                  </ul>
                </div>
              </div>

              <div class="am-u-md-3 ">
                <div class="footer_main--column">
                  <strong class="footer_main--column_title">联系详情</strong>
                  <ul class="footer_contact_info">
                    <li class="footer_contact_info--item"><i class="am-icon-phone"></i><span></span></li>
                    <li class="footer_contact_info--item"><i class="am-icon-envelope-o"></i><span></span></li>
                    <li class="footer_contact_info--item"><i class="am-icon-map-marker"></i><span></span></li>
                    <li class="footer_contact_info--item"><i class="am-icon-clock-o"></i><span><a href="#" target="_blank" title=""></a><a href="" title="" target="_blank"></a></span></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="assets/js/jquery-2.1.0.js" charset="utf-8"></script>
  <script src="assets/js/amazeui.js" charset="utf-8"></script>
</body>

</html>
